<template>
  <el-row>
    <el-col>
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item>
          <el-input v-model="formInline.keyword" style="width: 215px" placeholder="组织机构搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="clickSelect">查询</el-button>
          <el-button type="primary" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col style="min-height: 500px">
      <vxe-table
              :data="tableData"
              :row-config="{isHover: true}"
              :header-cell-style="{'text-align':'center'}"
              :stripe="true"
              border>
        <vxe-column field="orgName" title="名称" width="240"></vxe-column>
        <vxe-column field="orgCode" title="代码" width="240"></vxe-column>
        <vxe-column field="orgSite" title="地址"></vxe-column>
        <vxe-column field="des" title="简介"></vxe-column>
        <vxe-column title="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="edit(row)" style="margin-right: 10px">编辑</el-button>
            <el-popconfirm
                    title="确定删除吗？" @confirm="del(row)">
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页-->
      <p style="text-align: right">
        <vxe-pager
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                :total="page.total"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange">
        </vxe-pager>
      </p>
    </el-col>
  </el-row>
</template>

<script>
  import {orgPage, removeOrg} from '@/api/operations-center/org'

  export default {
    name: "OrganList",
    data() {
      return {
        tableData: [],
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        formInline: {
          keyword: '',
        }
      }
    },
    methods: {
      /**
       * {添加}
       *
       * @author: 宋康
       * @date: 2022/8/17 14:16
       */
      add() {
        this.$router.push({
          name: 'OrganAdd'
        });
      },
      /**
       * {编辑}
       *
       * @author: 宋康
       * @date: 2022/8/17 14:16
       */
      edit(row) {
        this.$router.push({
          name: 'OrganEdit',
          query: {
            id: row.id
          }
        });
      },
      del(row) {
        this.$alert(`确定删除【${row.orgName}】吗？`, '提示', {
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeOrg(row.id).then(res => {
            if (res.status) {
              this.$XModal.alert({
                content: '删除成功',
                status: 'success',
              }).then(() => {
                this.handlePageChange({currentPage: this.page.currentPage, pageSize: this.page.pageSize});
              })
            } else {
              this.$XModal.alert({
                content: res['msg'],
                status: 'error',
              })
            }
          })
        }).catch(() => {
        });
      },
      /**
       * {分页查询}
       * @param currentPage
       * @param pageSize
       * @author: 宋康
       * @date: 2022/8/17 15:39
       */
      handlePageChange({currentPage, pageSize}) {
        this.page.currentPage = currentPage;
        this.page.pageSize = pageSize;
        orgPage(currentPage, pageSize, this.formInline.keyword).then(res => {
          let data = res.data;
          this.tableData = data.records;
          this.page.total = data.total;
        })
      },
      /**
       * {筛选}
       *
       * @author: 宋康
       * @date: 2022/8/17 15:39
       */
      clickSelect() {
        this.page.currentPage = 1;
        this.handlePageChange({currentPage: this.page.currentPage, pageSize: this.page.pageSize});
      }
    },
    mounted() {
      this.clickSelect();
    }
  }
</script>

<style lang="scss" scoped>

</style>